<%@page contentType="text/html" pageEncoding="UTF-8"%>
<% String token = request.getParameter("token");%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Admin add user</title>
        <link href="../css/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    </head>
   
    <body>
        <div id="wrapper">
            <jsp:include page="../include/header.jsp" />
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        
                        <h2><%
                            if (session.getAttribute("errorMessage")!= null && !"".equals((String)session.getAttribute("errorMessage"))){
                            	out.print((String)session.getAttribute("errorMessage"));                            
                            }
                            session.setAttribute("errorMessage", null);
                                %></h2>
                        <!-- Fetch Rows -->
                        <table class="aatable">
                        		<form id="form1" action="../controller/AdminAddUserController?token=<%=token%>" method="post">
                                <tr><td colspan="2" style="font-weight: bold">Admin add user</td></tr>
                                <tr><td>EmpID:</td><td><input type="text" name="empid" id="empid" value=""/></td></tr>
                                <tr><td>User Name:</td><td><input type="text" name="username" id="username" value="" onchange="usernameinput();"/></td></tr>
                                <tr><td>IsVIP:</td><td><input type="radio" name="isVip" value="Y"/>Y<input type="radio" name="isVip" value="N" checked="true"/>N</td></tr>
                                <tr style="display:none"><td>First Name:</td><td><input type="text" name="firstname" value=""/></td></tr>
                                <tr style="display:none"><td>Last Name:</td><td><input type="text" name="lastname" value=""/></td></tr>
                                <tr style="display:none"><td>Chinese Name:</td><td><input type="text" name="namec" value=""/></td></tr>
                                <tr style="display:none"><td>Japanese Name:</td><td><input type="text" name="namej" value=""/></td></tr>
                                <tr style="display:none"><td>Sex:</td><td><input type="radio" name="sex" value="male" checked="true"/>Male<input type="radio" name="sex" value="female"/>Female</td></tr>
                                <tr style="display:none"><td>Isadmin:</td><td><input type="radio" name="isadmin" value="Y"/>Y<input type="radio" name="isadmin" value="N" checked="true"/>N</td></tr>
                                 <tr style="display:none"><td>Isactive:</td><td><input type="radio" name="isactive" value="Y" checked="true"/>Y<input type="radio" name="isactive" value="N"/>N</td></tr>
                                <tr><td>Password</td><td><input type="password" name="password" id="password" readonly="true"/></td></tr>
                                <tr><td>Confirm Password</td><td><input type="password" name="confirmpassword"  id="confirmpassword" readonly="true"/></td></tr>
                                <input type="file" id="imagefile">
							    <hr>
							    <img id="img1" style="max-height:300px;max-width:400px;min-height: 8em; min-width:8em;">
							    <hr>   
		                        <textarea id="image" name="image" cols="40" rows="8" style="display:block"></textarea><br/>
                                <tr><td colspan="2"><input type="button" value="Add" onclick="submitCheck();"/>&nbsp;<input type="button" value="Back" onClick="window.location.href='adminhomepage.jsp?token=<%=token%>';" /></td></tr>
      							</form>
      							<video id="video" width="320" height="320" autoplay></video>
							    <button id="picture" style="display:block" >拍照</button>
							    <canvas style="display:block" id="canvas" width="400" height="300"></canvas>                  
                        </table>
                        
                    </div>
                    <!-- end div#welcome -->			
                    
                </div>
                <!-- end div#content -->
               <div id="sidebar">
                        <!--ul-->
                        <% if ("Y".equals((String)session.getAttribute("isadmin"))) {;%>
                        <jsp:include page="../include/adminnav.jsp" />
                        <%} else {%>
                        <jsp:include page="../include/usernav.jsp"/>
                        <%}%>
                        <!-- end navigation -->
                        <jsp:include page="../include/updates.jsp"/>
                        <!-- end updates -->
                    <!--/ul-->
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
                <jsp:include page="../include/footer.jsp" />
        </div>
        <!-- end div#wrapper -->
    </body>
    <script>
var token = "";
var storage = window.localStorage;
var context = document.getElementById("canvas").getContext("2d");
function run(input_file,get_data){
    /*input_file：文件按钮对象*/
    /*get_data: 转换成功后执行的方法*/
    if ( typeof(FileReader) === 'undefined' ){
        alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
    } else {
        try{
            /*图片转Base64 核心代码*/
            var file = input_file.files[0];
            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.onload = function(){
                get_data(this.result);
            }
            reader.readAsDataURL(file);
        }catch (e){
            alert('图片转Base64出错啦！'+ e.toString())
        }
    }
}

$(function () {
   $("#imagefile").change(function () {
       run(this, function (data) {
           $('img').attr('src',data);
           var str = data.split(",")[1];             
           $('#image').val(str);
//            var img=new Image();
//            img.onload = function(){
//            context.drawImage(img,0,0);
//            };
//            img.src=data;
       });
   });
});


navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia({ audio: false, video: { width: 200, height: 200 } },
            function(stream) {
                var video = document.getElementById("video");
                video.src = window.URL.createObjectURL(stream);
                video.onloadedmetadata = function(e) {
                    console.log('nihao44eee4aaaaddda');
                    video.play();
                };
            },
            function(err) {
                console.log("The following error occurred: " + err.name);
            }
    );
} else {
    console.log("getUserMedia not supported");
}

document.getElementById("picture").addEventListener("click", function () {
    context.drawImage(video, 0, 0, 200, 200);
    var imgData=document.getElementById("canvas").toDataURL("image/png");
    var data=imgData.substr(22);
    //$.post('recorder/target/sc',{'sj':data});
    $("#image").val(data);
});

function usernameinput(){
	var username = $("#username").val();
	$("#password").val(username);
	$("#confirmpassword").val(username);
}

function isBlank(val){
	if (val == undefined || val == null || val == "") return true;
	else return false;
}

function isStrAlphaNumeric(val){
	if (isBlank(val)) return false;
	for (var i=0;i<val.length;i++){
		var ch = val.charAt(i);
		if (!isChAlphaNumeric(ch)) return false;
	}
	return true;
}

function isStrNumeric(val){
	if (isBlank(val)) return false;
	for (var i=0;i<val.length;i++){
		var ch = val.charAt(i);
		if (!isChNumeric(ch)) return false;
	}
	return true;
}

function isChAlphaNumeric(ch){
	if (ch >= '0' && ch <='9') return true;
	else if (ch >='a' && ch <='z') return true;
	else if (ch >='A' && ch <='Z') return true;
	else return false;
}

function isChNumeric(ch){
	if (ch >= '0' && ch <='9') return true;
	else return false;
}

function submitCheck(){
	alert($("#password").val());
	alert($("#confirmpassword").val());
	
	
	var empid = $("#empid").val();
	var username = $("#username").val();
	var image = $("#image").val();
	if (isBlank(empid)){
		alert("Empid can not be empty!");
		return false;
	}
	if (isBlank(username)){
		alert("Username can not be empty!");
		return false;
	}
	if (isBlank(image)){
		alert("Image can not be empty!");
		return false;
	}
	if (!isStrNumeric(empid)){
		alert("Empid must be numeric!");
		return false;
	}
	if (!isStrAlphaNumeric(username)){
		alert("Username must be alpha numeric!");
		return false;
	}
	$("#form1").submit();
}
</script>
</html>
